import React, { useRef, useEffect, useState } from 'react'
import classnames from 'classnames'
import PropTypes from 'prop-types'
import moment from 'moment'
import style from './index.module.less'
import { CaseSchema } from '@src/components/schema/caseSchema'

// 获取需要高亮的状态
function getActiveStatus (timeMap: { [k: string]: any }) {
  const keys = Object.keys(timeMap)
  const s = new Set()
  keys.forEach(k => {
    if (timeMap[k]) {
      s.add(k)
    }
  })
  return s
}

// 获取状态时间
function getStatusTime (d: CaseSchema) {
  if (!d) {
    return {}
  }
  const res: { [k: string]: any } = {
    收案: d.accept_datetime,
    立案: d.docket_datetime,
    交费: d.fee_pay_datetime,
    // 送达完成: d.arrive_datetime,
    已组庭: d.arbitrator_assign_datetime,
    已开庭: d.hearing_datetime,
    已结案: d.status !== '视为撤回仲裁申请' ? d.closure_datetime : undefined,
    已归档: d.file_datetime
  }
  if (d.closure_subtype === '视为撤回仲裁申请') {
    res.视为撤回仲裁申请 = d.closure_datetime
  } else if (d.closure_subtype === '不予受理') {
    res.不予受理 = d.accept_datetime
  }
  return res
}

function initStatus (caseDetail: CaseSchema, setStatusList: (v: string[]) => void) {
  const subStatus = caseDetail.closure_subtype
  let list = ['立案', '交费', '送达完成', '已组庭', '已开庭', '已结案', '已归档']
  if (subStatus === '不予受理') {
    list = ['不予受理', '已结案', '已归档', '', '', '', '']
  } else if (subStatus === '视为撤回仲裁申请') {
    list = ['立案', '视为撤回仲裁申请', '已结案', '已归档', '', '', '']
  }
  if (caseDetail.status === '视为撤回仲裁申请') {
    const i = list.indexOf('已结案')
    list.splice(i, 1)
  }
  setStatusList(list)
}

interface Props {
  caseDetail: CaseSchema
}

function Main ({ caseDetail }: Props) {
  const lineDom = useRef<HTMLDivElement>(null)
  const [timeMap, setTimeMap] = useState<{[k: string]: any}>({})
  const [activeStatusSet, setActiveStatusSet] = useState(new Set())
  const [width, setWidth] = useState<number | string>(0)
  const [statusList, setStatusList] = useState(['收案', '立案', '交费', '已组庭', '已开庭', '已结案', '已归档'])
  useEffect(() => {
    const c = lineDom.current
    if (!c) {
      return undefined
    }
    const list = c.querySelectorAll(`.${style.active}`)
    if (list.length === 0) {
      setWidth(0)
    } else {
      const d: HTMLDivElement = list[list.length - 1] as HTMLDivElement
      const w = (d.offsetWidth + d.offsetLeft) / c.offsetWidth * 100
      setWidth(`${w}%`)
    }
  }, [lineDom, activeStatusSet])
  useEffect(() => {
    if (caseDetail) {
      initStatus(caseDetail, setStatusList)
      setTimeMap(getStatusTime(caseDetail))
    }
  }, [caseDetail])
  useEffect(() => {
    setActiveStatusSet(getActiveStatus(timeMap))
  }, [timeMap])
  return (
    <div className={style.container}>
      <div className={style.line}>
        <div className={style['line-bg']}>
          <div className={style['line-active-bg']} style={{ width }} />
        </div>
        <div className={style['line-split-list']} ref={lineDom}>
          {statusList.map((li, i) => {
            const names = classnames(style['line-split'], { [style.active]: activeStatusSet.has(li) })
            const t = timeMap[li]
            return (
              <span key={i} className={names}>
                <span className={style['line-split-icon-container']}>
                  <span className={style['line-split-icon']} />
                </span>
                <span className={style['line-split-title']}>
                  <span className={style['line-split-text']}>{li}</span>
                  {t ? <span className={style['line-split-time']}>{moment(t * 1000).format('YYYY-MM-DD')}</span> : null}
                </span>
              </span>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export default Main
